<template>
    <div class="role-context">
        <div v-for="li in list" class="level-1">
            <div style=" display: flex;">
                <el-checkbox @change="(val) => {
                    batchAuthMenus(val, li)
                }" v-model="li.checked" :true-label="1" :false-label="0"
                    style="margin-right: 10px;display: flex;margin-top:2px;">
                    <div v-text="li.label" style="display:block; width:100px;margin-top:-2px;" class="hidden-text">
                    </div>
                </el-checkbox>
                <div class="level-1-half">
                    <div v-for="pl in li.children" class="level-2">
                        <el-checkbox @change="val => {
                            authMenu(val, pl.id)
                        }" v-model="pl.checked" :true-label="1" :false-label="0"
                            style="display: flex; align-items: center;margin-right: 10px;">
                            <div class="level-2-label hidden-text" style="width:245px;" v-text="pl.label"></div>
                        </el-checkbox>
                        <div class="level-2-half">
                            <el-checkbox @change="(val) => batchAuthFuncs(val, pl)" :disabled="!pl.checked"
                                v-if="pl.children.length > 1" :indeterminate="pl.indeterminate" v-model="pl.checkAll"
                                :true-label="1" :false-label="0"
                                style="display: flex;margin-right:10px;align-items: center;">
                                <div style="width: 50px;" class="hidden-text">全选</div>
                            </el-checkbox>
                            <div class="level-3-half">
                                <div v-for="fb in pl.children" class="level-3">
                                    <el-checkbox style="display: flex; align-items: center;" :disabled="!pl.checked"
                                        @change="val => {
                                            authFunc(val, pl.id, fb.id, pl)
                                        }" v-model="fb.checked" :true-label="1" :false-label="0">
                                        <div style="width:70px;" v-text="fb.label" class="hidden-text"></div>
                                    </el-checkbox>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'role-list',
    props: {
        testData: {
            type: Boolean, default: true
        }
    },
    data() {
        return {
            list: this.testData ? [{
                id: 1,
                label: '程序分类一',
                children: [
                    { id: 11, label: '菜单一', children: [{ id: 111, label: '功能一' }], },
                    { id: 12, label: '菜单二', checked: 1, children: [{ id: 121, label: '功能一', checked: 1 }, { id: 122, label: '功能一', checked: 0 }] }
                ]
            }, {
                id: 2,
                label: '程序分类二',
                children: [
                    { id: 21, label: '菜单一', children: [{ id: 211, label: '功能一' }] }
                ]
            }, {
                id: 2,
                label: '程序分类三程序分类三',
                children: [
                    { id: 21, label: '菜单一', children: [] }
                ]
            }] : []
        }
    },
    methods: {
        //批量授权菜单
        batchAuthMenus(val, li) {
            this.$emit("batchAuthMenus", val, li, () => {
                li.children.forEach(element => {
                    element.checked = val ? 1 : 0
                });
            })
        },
        //单次授权菜单
        authMenu(val, id) {
            this.$emit("authMenu", val, id)
        },
        //批量授权程序功能
        batchAuthFuncs(v, li) {
            this.$emit("batchAuthFuncs", v, li, () => {
                li.indeterminate = false;
                li.children.forEach(element => {
                    element.checked = v ? 1 : 0
                });
            })
        },
        //单次授权程序功能
        authFunc(val, pid, id, parent) {
            this.$emit("authFunc", val, pid, id, parent, () => {
                let checkedCounts = parent.children.filter(c => c.checked == 1).length;
                let pls = parent.children.length;
                parent.checkAll = (checkedCounts == pls && pls > 0) ? 1 : 0;
                parent.indeterminate = checkedCounts > 0 && checkedCounts < pls;
            })
        },
        getList() {
            this.$emit('load', (res) => {
                if (res) {
                    this.list = res;
                }
                this.list = this.list.map(a => {
                    let firstLevelChecked = a.children.filter(fl => fl.checked == 1).length;
                    return {
                        id: a.id,
                        label: a.label,
                        checked: firstLevelChecked > 0 ? 1 : 0,
                        children: a.children?.map(p => {
                            let level2CheckedCounts = p.children.filter(aa => aa.checked == 1).length;
                            let pls = p.children.length;
                            return {
                                id: p.id,
                                label: p.label,
                                checked: p.checked,
                                checkAll: (level2CheckedCounts == pls && pls > 0) ? 1 : 0,
                                indeterminate: level2CheckedCounts > 0 && level2CheckedCounts < pls,
                                children: p.children.map(b => {
                                    return {
                                        id: b.id,
                                        label: b.label,
                                        checked: b.checked || 0,
                                    }
                                }),
                            }
                        })
                    }
                })
            });
        }
    },
    mounted() {
        this.getList();
    }

}
</script>

<style scoped>
.role-context {
    --border-width: 1px solid #dcdfe6;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.level-1 {
    display: flex;
    flex-direction: column;
    border: var(--border-width);
    padding: 10px;
    padding-right: 0;
    border-bottom: none;
}

.level-1-half {
    display: flex;
    flex-direction: column;
}

.level-1:first-of-type {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.level-1:last-of-type {
    margin-bottom: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: var(--border-width);
}

.level-2 {
    display: flex;
    margin-bottom: 5px;
    align-items: flex-start;
    border-bottom: var(--border-width);
    min-height: 25px;

}

.level-2-label {
    border-right: var(--border-width);
}

.level-2:last-of-type {
    border-bottom: none;
}

.level-2-half {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.level-3-half {
    display: flex;
    flex-wrap: wrap;
}

.level-3 {
    margin-right: 10px;
    margin-bottom: 5px;
    width: 80px;
}

.hidden-text {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 5px;
}
</style>


<style>
.role-context .el-checkbox__inner {
    top: 1px !important;
}
</style>